{extend name="indexextends"}



{block name="title"}栏目管理{/block}
{block name='column'}layui-this{/block}


{block name='nr'}
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add" onclick="initShowAdd()">新增栏目</button>
    </div>
</script>







ps：删除父栏目时子栏目也会连同删除，<br>
栏目类型选择后无法修改
    <div class="demo-side">
        <table id="demoTreeTb"></table>
    </div>


<!-- 表格操作列 -->
<script type="text/html" id="tbBar">
    <a class="layui-btn  layui-btn-xs" lay-event="edit">编辑栏目</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除栏目</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="static">生成静态</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="preview" >预览栏目</a>
</script>






{/block}




{block name='js'}
<script>

    //树形表格
   layui.use(['layer', 'util', 'treeTable'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var util = layui.util;
        var treeTable = layui.treeTable;
        $('body').removeClass('layui-hide');

        // 渲染表格
        var insTb = treeTable.render({
            elem: '#demoTreeTb',
            url: '{:url("admin/column/show")}',
            // toolbar: 'default',
            height: 'full-200',
            toolbar: '#toolbarDemo',
            tree: {
                iconIndex: 2,
                isPidData: true,
                idName: 'id',
                pidName: 'pid'
            },
            cols: [

                [
                    {type: 'checkbox',hide:true},
                    {field: 'id', title: 'id', minWidth: 10},
                    {field: 'name', title: '栏目名称',},
                    {field: 'pid', title: '父级栏目',hide:true},
                    {field: 'dir_name', title: '栏目目录名称',hide:true},
                    {field: 'type', title: '栏目类型',templet:function (res) {
                            if (res.type=='1'){
                                  return "封面栏目"
                            }else if (res.type=='2'){
                                  return "列表栏目"
                            }
                        }},
                    {field: 'cover_template', title: '封面模板',hide:true},
                    {field: 'list_templates', title: '列表模板',hide:true},
                    {field: 'article_templates', title: '文章模板',hide:true},
                    {align: 'center', toolbar: '#tbBar', title: '操作', width: 350}
                ]
            ],
            style: 'margin-top:0;'
        });

        // 工具列点击事件
        treeTable.on('tool(demoTreeTb)', function (obj) {
            var datas = obj.data;
            var event = obj.event;
            if (event === 'del') {
                $.ajax({
                    type:"POST",
                    url:"{:url('admin/column/deleteColumn')}",
                    data:datas,
                    success:function (res){
                        res=$.parseJSON(res);
                        if (res['code']>0){
                            layer.msg(res['message'], {time:1000},function(){
                                setTimeout('window.location.reload()',1000);
                            });
                        }else {
                            layer.msg(res['message'])
                        }
                    }
                })

            } else if (event === 'edit') {

                  edit(datas);

            } else if (event === 'static') {

                buildStatic(datas);

            }else if(event === 'preview'){
                Preview(datas);
            }
        });





    });



    //添加新栏目
    function initShowAdd() {


        var addHtml = '<form id="form1" class="layui-form" method="post" action="{:url(\'admin/column/addcolumn\')}" style="width:460px; margin-top: 20px;">\
                           <div class="layui-form-item">\
                             <label class="layui-form-label"><span style="color: red">*</span>栏目名称</label>\
                             <div class="layui-input-block">\
                               <input type="text" name="name" lay-verify="title" autocomplete="off" placeholder="请输入栏目名称" class="layui-input">\
                             </div>\
                           </div>\
                           \<div class="layui-form-item">\
                                <label  class="layui-form-label"><span style="color: red">*</span>父级栏目</label>\
                               <div class="layui-input-block">\
                                   <input type="text" name="fathername" id="tree" lay-filter="tree" class="layui-input" >\
                               </div>\
                            </div>\
                            \<div class="layui-form-item">\
                             <label class="layui-form-label"><span style="color: red">*</span>目录名称</label>\
                             <div class="layui-input-block">\
                               <input type="text" name="directoryName" lay-verify="title" autocomplete="off" placeholder="请输入目录名称" class="layui-input">\
                             </div>\
                           </div>\
                           \<div class="layui-form-item ">\
                             <label class="layui-form-label">SEO栏目标题</label>\
                             <div class="layui-input-block">\
                               <input type="text" name="seo_title" lay-verify="title" autocomplete="off" placeholder="请输入栏目标题" class="layui-input">\
                           </div>\
                           </div>\
                           \<div class="layui-form-item ">\
                             <label class="layui-form-label">关键字(keywords)</label>\
                              <div class="layui-input-block">\
                              <textarea name="keywords" placeholder="请输入关键字" class="layui-textarea"></textarea>\
                            </div>\
                           </div>\
                           \<div class="layui-form-item ">\
                             <label class="layui-form-label">栏目描述(description)</label>\
                             <div class="layui-input-block">\
                              <textarea name="description" placeholder="请输入栏目描述" class="layui-textarea"></textarea>\
                            </div>\
                           </div>\
                           \<div class="layui-form-item">\
                                <label class="layui-form-label" style="line-height: 50px">栏目类型</label>\
                                <div class="layui-input-block">\
                                  <input type="radio" name="type" lay-filter="type"  class="btn" value="1" title="封面栏目（可以创建子栏目，但不能发文章）" checked="">\
                                  <input type="radio" name="type" lay-filter="type" class="btn" value="2" title="列表栏目（可以发布文章，不能创建子栏目）">\
                                </div>\
                            </div>\
                            \<div class="layui-form-item box" style="display: block">\
                             <label class="layui-form-label">封面栏目模板</label>\
                             <div class="layui-input-block">\
                               <input type="text" name="cover_template" lay-verify="title" autocomplete="off" placeholder="请输入封面栏目模板名称" class="layui-input">\
                             </div>\
                           </div>\
                           \<div class="box" style="display:none">\
                            <div class="layui-form-item " >\
                             <label class="layui-form-label">列表栏目模板</label>\
                             <div class="layui-input-block">\
                               <input type="text" name="list_templates" lay-verify="title" autocomplete="off" placeholder="请输入列表栏目模板名称" class="layui-input">\
                           </div>\
                           </div>\
                           \ <div class="layui-form-item ">\
                             <label class="layui-form-label">文章模板</label>\
                             <div class="layui-input-block">\
                               <input type="text" name="article_templates" lay-verify="title" autocomplete="off" placeholder="请输入文章模板名称" class="layui-input">\
                           </div>\
                           </div>\
                             \</div>\
                       </form>\
              \
               ';

        //树形选择框
        layui.config({
            base: '__ROOT__/public/static/layui/'
        }).extend({
            treeSelect: 'treeSelect'
        });
        layui.use(['treeSelect', 'form', 'layer'], function () {
            var treeSelect= layui.treeSelect,
                form = layui.form,
                $ = layui.jquery,
                layer = layui.layer;

            treeSelect.render({
                // 选择器
                elem: '#tree',
                // 数据
                data: '{:url("admin/column/chooseColumn")}',
                // 异步加载方式：get/post，默认get
                type: 'post',
                // 占位符
                placeholder: '选择栏目',
                // 是否开启搜索功能：true/false，默认false
                search: true,
                // 一些可定制的样式
                style: {
                    folder: {
                        enable: true
                    },
                    line: {
                        enable: true
                    }
                },
                // 点击回调
                click: function(d){
                    // console.log(d);

                },
                // 加载完成后的回调函数
                success: function (d) {
                    // console.log(d);
//                选中节点，根据id筛选
                    //treeSelect.checkNode('tree', 3);

                    // console.log($('#tree').val());

//                获取zTree对象，可以调用zTree方法
                    var treeObj = treeSelect.zTree('tree');
                    // console.log(treeObj);

//                刷新树结构
                    treeSelect.refresh('tree');
                }
            });

        });


        layui.use('form', function(){
            var form = layui.form;
            var treeSelect= layui.treeSelect;




            //监听提交
            layer.open({
                type: 1,
                title: '新增栏目',
                content: addHtml,
                area:['500px','550px'],
                btn: ['提交', '取消'],

                success:function (){
                     form.render();//弹出层打开时重载表单，不然select会打不开

                    //监听选择的是什么类型的栏目
                    form.on('radio(type)', function(data){
                        // console.log(data.elem); //得到radio原始DOM对象
                        // console.log(data.value); //被点击的radio的value值
                        var box=document.getElementsByClassName('box');


                        if(data.value==1){
                            box[0].style.display="block";
                            box[1].style.display="none";
                        }
                        if (data.value==2){
                            box[1].style.display="block";
                            box[0].style.display="none";
                        }

                    });


                }, yes:function (layIndex) {
                    $('#form1').ajaxSubmit({
                        data:{
                            'id':$('#tree').val(),//把选中的栏目id传至后台
                        },
                        success: function (rsp) {
                            rsp=$.parseJSON(rsp)
                            if (rsp['code']>0){
                                layer.msg('栏目添加成功');
                                setTimeout(function() {
                                    layer.close(layIndex);//延迟1秒关闭弹窗
                                    location.reload(true)//页面刷新
                                }, 1000);
                            }else {
                                layer.msg(rsp['message'])
                            }

                        }
                    });
                }

            });

        });



    }


    //编辑栏目
    function edit(datas) {


        var addHtml = '<form id="form1" class="layui-form" method="post" action="{:url(\'admin/column/edit\')}" style="width:460px; margin-top: 20px;">\
                           <div class="layui-form-item">\
                             <label class="layui-form-label"><span style="color: red">*</span>栏目名称</label>\
                             <div class="layui-input-block">\
                               <input type="text" name="name" lay-verify="title" autocomplete="off" placeholder="请输入栏目名称" class="layui-input" value="'+datas.name+'">\
                               \<input type="hidden" name="type" value="'+datas.type+'">\
                               \<input type="hidden" name="id" value="'+datas.id+'">\
                               \<input type="hidden" name="old_dir_name" value="'+datas.dir_name+'">\
                               \<input type="hidden" name="old_name" value="'+datas.name+'">\
                             </div>\
                           </div>\
                            \<div class="layui-form-item">\
                             <label class="layui-form-label"><span style="color: red">*</span>目录名称</label>\
                             <div class="layui-input-block">\
                               <input type="text" name="directoryName" lay-verify="title" autocomplete="off" placeholder="请输入目录名称" class="layui-input" value="'+datas.dir_name+'">\
                             </div>\
                           </div>\
                           \<div class="layui-form-item ">\
                             <label class="layui-form-label">SEO栏目标题</label>\
                             <div class="layui-input-block">\
                               <input type="text" id="seo_title" name="seo_title" lay-verify="title" autocomplete="off" placeholder="请输入栏目标题" class="layui-input">\
                           </div>\
                           </div>\
                           \<div class="layui-form-item ">\
                             <label class="layui-form-label">关键字(keywords)</label>\
                              <div class="layui-input-block">\
                              <textarea name="keywords" id="keywords" placeholder="请输入关键字" class="layui-textarea"></textarea>\
                            </div>\
                           </div>\
                           \<div class="layui-form-item ">\
                             <label class="layui-form-label">栏目描述(description)</label>\
                             <div class="layui-input-block">\
                              <textarea name="description" id="description" placeholder="请输入栏目描述" class="layui-textarea"></textarea>\
                            </div>\
                           </div>\
                            \<div class="layui-form-item box" style="display: block">\
                             <label class="layui-form-label">封面栏目模板</label>\
                             <div class="layui-input-block">\
                               <input type="text" name="cover_template" lay-verify="title" autocomplete="off" placeholder="请输入封面栏目模板名称" class="layui-input" value="'+datas.cover_template+'">\
                             </div>\
                           </div>\
                           \<div class="box" style="display:none">\
                            <div class="layui-form-item " >\
                             <label class="layui-form-label">列表栏目模板</label>\
                             <div class="layui-input-block">\
                               <input type="text" name="list_templates" lay-verify="title" autocomplete="off" placeholder="请输入列表栏目模板名称" class="layui-input" value="'+datas.list_templates+'">\
                           </div>\
                           </div>\
                           \ <div class="layui-form-item ">\
                             <label class="layui-form-label">文章模板</label>\
                             <div class="layui-input-block">\
                               <input type="text" name="article_templates" lay-verify="title" autocomplete="off" placeholder="请输入文章模板名称" class="layui-input" value="'+datas.article_templates+'">\
                           </div>\
                           </div>\
                             \</div>\
                           \
                       </form>\
              \
               ';


        layui.use('form', function(){
            var form = layui.form;
            var treeSelect= layui.treeSelect;




            //监听提交
            layer.open({
                type: 1,
                title: '编辑栏目',
                content: addHtml,
                area:['500px','550px'],
                btn: ['提交', '取消'],

                success:function (){
                    form.render();//弹出层打开时重载表单，不然select会打不开

                    var box=document.getElementsByClassName("box");

                    if (datas.type==1){
                        box[1].style.display="none";
                        box[0].style.display="block";
                    }else if(datas.type==2){
                        box[0].style.display="none";
                        box[1].style.display="block";
                    }

                    //弹出层打开时渲染对应数据
                    $.ajax({
                        url:"{:url('admin/Column/column_info')}",
                        type:"GET",
                        data:{"id":datas.id},
                        success:function (res) {
                            res=$.parseJSON(res)

                            $("#seo_title").attr("value",res['seo_title'])
                            $("#keywords").val(res['keywords'])
                            $("#description").val(res['description'])


                        }
                    })




                }, yes:function (layIndex) {
                    $('#form1').ajaxSubmit({
                        data:{
                            'id':$('#tree').val(),//把选中的栏目id传至后台
                        },
                        success: function (rsp) {
                            rsp=$.parseJSON(rsp)
                            if (rsp['code']>0){
                                layer.msg(rsp['message']);
                                setTimeout(function() {
                                    layer.close(layIndex);//延迟1秒关闭弹窗
                                    location.reload(true)//页面刷新
                                }, 2000);
                            }else {
                                layer.msg(rsp['message'])
                            }

                        }
                    });
                }

            });

        });



    }


    //生成静态栏目
    function buildStatic(datas){
        var urls;

        if (datas.type==1){
            //type==1那么就是封面栏目
            urls="";
        }else if(datas.type==2){
            //列表栏目
            urls="{:url('admin/column/build_ListColumns_static')}";
        }

        $.ajax({
            url:urls,
            data:datas,
            success:function (res){
               // res=$.parseJSON(res)
               layer.msg(res)
            }

        })


    }

    function Preview(datas){
           var id=datas.id;//栏目id
           var type=datas.type;//栏目类型
         window.open("{:url('/column/preview/type/"+type+"/id/"+id+"')}")
    }












</script>


{/block}